import React, {Component} from 'react';
import {View, Text, ImageBackground,StyleSheet, StatusBar, Image, TouchableOpacity} from 'react-native';
import {pxToDp} from "../../utils/styleKits";
import icon from "../../utils/icon";

import {Overlay} from 'teaset';

import Filter from "./component/filter.js";

// 搜附近页面
class Index extends Component {

  state = {
    gender: '男',
    distance: 2,
    data: [
      {
        header: 'https://www.itying.com/images/flutter/list1.jpg',
        nickname: '张三',
        sex: '女',
        dist: 1,
      },
      {
        header: 'https://www.itying.com/images/flutter/list2.jpg',
        nickname: '李四',
        sex: '女',
        dist: 4,
      },
      {
        header: 'https://www.itying.com/images/flutter/list3.jpg',
        nickname: '王五',
        sex: '女',
        dist: 6,
      },
      {
        header: 'https://www.itying.com/images/flutter/list4.jpg',
        nickname: '赵六',
        sex: '男',
        dist: 12,
      },
    ]
  };

  render() {
    return (
      <View style={{flex:1}}>
        <StatusBar translucent backgroundColor={"transparent"}/>
        <ImageBackground source={require('../../images/search.gif')} style={styles.bg}>
          {/*右上角筛选按钮*/}
          <TouchableOpacity style={styles.searchIconBox} onPress={this.showOverlayView}>
            <Text style={{fontFamily:'iconfont',fontSize: pxToDp(20),color: '#8336cd'}}>{icon.iconshaixuan}</Text>
          </TouchableOpacity>

          {/*随机生成的地图点*/}
          <View style={styles.itemBox}>
            {this.state.data.map(item => {
              return <View style={[styles.item, this.randomDist(item.dist)]}>
                <Image source={require('../../images/showfirend.png')} style={styles.showFirend}/>
                <Image source={{uri: item.header}} style={styles.header}/>
                <Text style={styles.nickname}>{item.nickname}</Text>
              </View>
            })}
          </View>

          {/*底部文字*/}
          <View style={styles.bottomTextBox}>
            <Text style={{color:'#fff'}}>您附近有<Text style={{color:'red',fontSize: pxToDp(20)}}>1</Text>个好友</Text>
            <Text style={{color:'#fff'}}>选择聊聊吧</Text>
          </View>
        </ImageBackground>
      </View>
    );
  }

  randomDist = (dist) => {
    if(dist <= 3){
      return {
        left: pxToDp(150) + Math.ceil(Math.random()*30),
        top: pxToDp(200) + Math.ceil(Math.random()*30)
      }
    } else if (dist >3 && dist <= 5 ) {
      return {
        left: pxToDp(250)+ Math.ceil(Math.random()*30),
        top: pxToDp(150)+ Math.ceil(Math.random()*30)
      }
    } else if (dist >5 && dist <= 8){
      return {
        left: pxToDp(100)+ Math.ceil(Math.random()*30),
        top: pxToDp(300)+ Math.ceil(Math.random()*30)
      }
    } else if (dist > 10) {
      return {
        left: pxToDp(50)+ Math.ceil(Math.random()*30),
        top: pxToDp(50)+ Math.ceil(Math.random()*30)
      }
    }
  };

  // 底部弹框
  showOverlayView = () => {
    let overlayView = (
      <Overlay.View
        style={{ justifyContent: 'flex-end'}}
        modal={true}
        overlayOpacity={0.7}
        ref={v => this.overlayView = v}
      >
        {/*过滤*/}
        <Filter close={this.close}/>

      </Overlay.View>
    );
    Overlay.show(overlayView);
  };

  // 关闭底部弹窗
  close = (info) => {
    console.log(info);
    this.overlayView && this.overlayView.close();

    let res = this.setData(info);
    this.setState({
      data: res
    })
  };

  setData = (info) => {
    let {data} = this.state;
    let newData = [];

    for (let i=0; i<data.length; i++){
      if (data[i].sex === info.gender && data[i].dist <= info.distance) {
        newData.push(data[i]);
      }
    }
    return newData
  }

}

const styles = StyleSheet.create({
  bg:{
    flex: 1,
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchIconBox: {
    position: 'absolute',
    top: pxToDp(40),
    right: pxToDp(40),
    backgroundColor: '#fff',
    width: pxToDp(50),
    height: pxToDp(50),
    borderRadius:pxToDp(25),
    justifyContent: 'center',
    alignItems: 'center',
  },

  itemBox: {
    width: '90%',
    height: '70%',
    position: 'relative',
  },
  item: {
    width: pxToDp(60),
    height: pxToDp(60),
    position: 'absolute',
    left : 0,
    top: 0,
  },
  showFirend: {
    width: pxToDp(60),
    height: pxToDp(60),
    resizeMode: 'contain',
  },
  header: {
    position: 'absolute',
    left: pxToDp(10),
    top: pxToDp(3),
    width: pxToDp(40),
    height: pxToDp(40),
    borderRadius: pxToDp(20),
  },
  nickname: {
    position: 'absolute',
    left: 0,
    top: pxToDp(-20),
    width: '100%',
    textAlign: 'center'
  },




  bottomTextBox: {
    position: 'absolute',
    left: 0,
    bottom: pxToDp(20),
    width: '100%',
    alignItems: 'center',
  }
});

export default Index;